<template>
  <div class="puopmancv">
      <div class="pinglsito">
          <div class="zhanwei">
                <div class="hpoto">
                    <van-nav-bar title="订单详情"
                     left-arrow
                    @click-left="onClickLeft"
                    @click-right="onClickRight"
                    >
                            <template #right>
                                <van-icon name="user-o" size="18" />
                            </template>
                    </van-nav-bar>
                </div>
          </div>
          <div class="lito">
            <van-tabs v-model="active">
                <van-tab :title="item" v-for="(item,index) in listty" :key="index">
                    <div class="bomyo" v-for="(item) in listoss" :key="item.transaction_code">
                        <div v-if=" index == item.type || index == 0">
                            <div class="boxlito" >
                                <div class="lipotop">
                                    <div class="left">
                                        <span>订单号:{{item.transaction_code}}</span>
                                    </div>
                                    <div class="right">
                                        <span class="tcolor" v-if="item.type==1">待支付</span>
                                        <span class="tcolor" v-if="item.type==2">待发货</span>
                                        <span class="tcolor" v-if="item.type==3">待收货</span>
                                        <span class="tcolor" v-if="item.type==4">评价</span>
                                    </div>
                                </div>
                                <div>
                                    <van-card
                                    :num="item.num"
                                    :price="item.price"
                                    :desc="item.tilie"
                                    
                                    :title="item.name"
                                    :thumb="item.goodsId_img"
                                    >
                                    <template #tags>
                                        <van-tag plain type="danger">包邮</van-tag>
                                    </template>
                                     <!-- <template #tags>
                                        <van-tag plain type="danger">包邮</van-tag>
                                     </template> -->
                                     </van-card>
                                </div>
                                <div class="buttontos">
                                    <div class="left">
                                        <span>收件人:{{item.addrestli.name}}</span>
                                    </div>
                                    <div class="right">
                                        <van-button type="info" v-if="item.type==1" @click="payto(item.transaction_code)">支付</van-button>
                                        <van-button type="info" v-if="item.type==2" @click="gettype(item.transaction_code)">发货</van-button>
                                        <van-button type="info" v-if="item.type==3" @click="gettype(item.transaction_code)">收货</van-button>
                                        <van-button type="info" v-if="item.type==4" @click="gettype(item.transaction_code)">评价</van-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                   
                </van-tab>
            </van-tabs>
           
          </div>
      </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { NavBar,Icon,Tab, Tabs,Card,Button,Tag,Panel,Dialog } from 'vant';
Vue.use(NavBar).use(Icon).use(Tabs).use(Tab).use(Card).use(Button).use(Tag).use(Panel);
// Dialog({ message: '提示' });
export default {
    data(){
        return {
            active: 2,
            listoss:[
                // {
                //     name:"吧唧饭馆 颗粒花生酱",
                //     goodsId:14,
                //     tilie:"吧唧饭馆 颗粒花生酱 0糖0添加高蛋白200g*2瓶装（海盐颗粒+原味颗粒）",
                //     biao:"",
                //     num:3,
                //     price:30,
                //     checked:false,
                //     goodsId_img:'https://cp1.douguo.com/upload/tuan/6/2/e/448_62d58703c7177fd3d8ae518bd843b34e.jpg',
                //     transaction_code:"2367102602123456789",
                //     type:1
                // },
                // {
                //     name:"吧唧饭馆 颗粒花生酱",
                //     goodsId:15,
                //     tilie:"吧唧饭馆 颗粒花生酱 0糖0添加高蛋白200g*2瓶装（海盐颗粒+原味颗粒）",
                //     biao:"",
                //     num:3,
                //     price:30,
                //     checked:false,
                //     goodsId_img:'https://cp1.douguo.com/upload/tuan/6/2/e/448_62d58703c7177fd3d8ae518bd843b34e.jpg',
                //     transaction_code:"2367102602123456789",
                //     type:2
                // },
                // {
                //     name:"吧唧饭馆 颗粒花生酱",
                //     goodsId:16,
                //     tilie:"吧唧饭馆 颗粒花生酱 0糖0添加高蛋白200g*2瓶装（海盐颗粒+原味颗粒）",
                //     biao:"",
                //     num:3,
                //     price:30,
                //     checked:false,
                //     goodsId_img:'https://cp1.douguo.com/upload/tuan/6/2/e/448_62d58703c7177fd3d8ae518bd843b34e.jpg',
                //     transaction_code:"2367102602123456789",
                //     type:2
                // },
                // {
                //     name:"吧唧饭馆 颗粒花生酱",
                //     goodsId:17,
                //     tilie:"吧唧饭馆 颗粒花生酱 0糖0添加高蛋白200g*2瓶装（海盐颗粒+原味颗粒）",
                //     biao:"",
                //     num:3,
                //     price:30,
                //     checked:false,
                //     goodsId_img:'https://cp1.douguo.com/upload/tuan/6/2/e/448_62d58703c7177fd3d8ae518bd843b34e.jpg',
                //     transaction_code:"2367102602123456789",
                //     type:2
                // },
            ],
            listty:[
                "全部订单",
                "未支付",
                "待发货",
                "待收货",
                "评价"
            ],
            
        };
    },
    methods:{
         onClickLeft(){
            console.log("123")
            this.$router.push('/Home')
        },
        onClickRight(){
            // console.log("789")
            this.$router.push('/mine')
        },
        payto(transaction_code){
            Dialog.confirm({
                title: '',
                message: '确认支付',
                })
                .then(() => {
                    // on confirm
                    let index = this.listoss.findIndex(item =>item.transaction_code==transaction_code);
                    this.listoss[index].type=2;
                    window.sessionStorage.setItem('orderlist',JSON.stringify(this.listoss));//存数据
                })
                .catch(() => {
                    // on cancel
                });
        },
        gettype(transaction_code){
            let index = this.listoss.findIndex(item =>item.transaction_code==transaction_code);
            if( this.listoss[index].type ==2){
                this.listoss[index].type =3 ;
            }else if(this.listoss[index].type ==3){
                this.listoss[index].type =4 ;
            }
            else if(this.listoss[index].type ==4){
                Dialog({ message: '评价有待开发' });
                // console.log("123")
            }
             window.sessionStorage.setItem('orderlist',JSON.stringify(this.listoss));//存数据
           // this.listoss.index =index;
        },
        getlistopp(){
            let orderlist = JSON.parse(sessionStorage.getItem('orderlist'));//取数据
            // console.log("订单生成",orderlist);
            if(orderlist){
                orderlist.forEach(ele => {
                    // console.log(ele)
                    let {name,goodsId,title,num,price,checked,goodsId_img,transaction_code,type,addrestli} = ele;
                    let data={
                        name:name,
                        goodsId:goodsId,
                        tilie:title,
                        biao:"",
                        num:num,
                        price:price,
                        checked:checked,
                        goodsId_img:goodsId_img,
                        transaction_code:transaction_code,
                        type:type,
                        addrestli:addrestli
                    }
                    // console.log(data)
                    this.listoss.push(data);
                });
            }
        }
    },
    created(){
        this.getlistopp();
    }
    
}
</script>

<style lang="less">
    .puopmancv{
        width: 100%;
        height: 100%;
        position:fixed;
        z-index: 99;
        // background-color: #fff;
        
    }
    .pinglsito{
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 99;
        overflow-y: scroll;
        overflow-x: hidden;
        // padding-bottom: 20px;
         background-color: #f8f8f8f8;
        .zhanwei{
            width: 100%;
            height: 40px;
        }
        .hpoto{
            width: 100%;
            height: 40px;
            position: fixed;
            background-color: white;
            top: 0;
            left: 0;
            z-index: 99;
            .van-nav-bar__content{
                i{
                    color: #000;
                }
            }
        }
        .lito{
            width: 100%;
            margin-top: 5px;
            // padding-left: 10px;
            // padding-right: 10px;
            box-sizing: border-box;
              
            .bomyo{
                width: 100%;
               
            }
            .van-tabs__content{
                padding-bottom: 10px;
                
            }
        }
        .boxlito{
            width: 96%;
            margin: auto;
            margin-top: 10px;
            height: 175px;
            border-radius: 8px;
            background-color:#ffff;
            padding: 6px;
            box-sizing:border-box;
            // border-top: 1px solid rgb(196, 195, 191);
            // border-bottom: 1px solid rgb(196, 195, 191);
            .lipotop{
               
                border-bottom: 1px solid rgb(196, 195, 191);
                width: 100%;
                height: 30px;
                padding-left: 5px;
                padding-right: 5px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 14px;
                // background-color: #fff;
                .left{
                    width: 80%;
                    height: 100%;
                    display: flex;
                    justify-content: flex-start;
                    // padding-left: 10px;
                    // box-sizing: border-box;
                    align-items: center;
                }
                .right{
                    width: 20%;
                    height: 100%;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    padding-right: 10px;
                    box-sizing: border-box;
                    
                    .tcolor{
                        color: #ee0a24;
                    }
                }
            }
            .van-card {
                position: relative;
                box-sizing: border-box;
                padding: 8px 5px;
                color: #323233;
                font-size: 12px;
                background-color: #ffff;
                
                   .van-card__title{
                        // margin-bottom: 10px;
                        line-height: 18px;
                    }
                    .van-card__thumb{
                        width: 100px;
                        .van-image{
                            width: 100px;
                        }
                    }
                .van-card__bottom{
                    padding-right: 10px;
                }
            }
            .buttontos{
                margin-top: 2px;
                // border-top: 1px solid rgb(196, 195, 191);
                width: 100%;
                height: 30px;
                display: flex;
                padding-left: 5px;
                padding-right: 5px;
                box-sizing: border-box;
                justify-content: space-between;
                .left{
                    width: 25%;
                    height: 100%;
                    display: flex;
                    justify-content: flex-start;
                    // justify-content: flex-end;
                    align-items: center;
                    span{
                        font-size: 14px;
                    }
                }
                .right{
                    width: 70%;
                    height: 100%;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                }
                
                .van-button{
                    width: 60px;
                    height: 20px;
                    background-color: #fff;
                    border:0px;
                    font-size: 10px;
                    color: #898989;
                    
                    
                }
            }
        }
       
    }
</style>